<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <base href="<%=basePath%>">
    
    <title>statistics</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>	

</head>
<body>

    <div class="container-fluid">
	  <div class="row">
	  	<div class="col-xs-12"><div id="container"></div></div>
	  	<div class="col-xs-12" id="textDiv">
	  </div>
	</div>
	
	<input type="hidden" id="ProjectCode" value="${ProjectCode}"/>

    <script type="text/javascript">
    var path = "<%=path%>";
    var ProjectCode = $('#ProjectCode').val();
    var collectNameArrary = new Array();
    var collectDataArrary = new Array();
    
    $(function () {
   		
   		getEchart(ProjectCode);//初始化
		     
	});
    
    function getEchart(ProjectCode){
        $.ajax({
	        type : "post",
	        url: "http://202.105.104.105:8804/device/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
	        async:true,
	        data:{
	          'ProjectCode':ProjectCode
	        },
	        dataType: 'json',
	        success: function(data){
	        	  var result = "";
	              $.each(data.data,function(index,item){//生成所需数组【设备类型】
	            		result = $.inArray(item.NavName, collectNameArrary); 
	            		if(result == "-1"){
	            			 collectNameArrary.push(item.NavName)
	            		}
	        	  });

	    		  setTimeout(function () {//间隔50m拉取数据*
	    			  fetchData(data.data);
		  	      }, 50); 
	         },
	        error:function(){
	               console.log("服务中断");
	        }
	      })
    }
    
    function fetchData(jsonData){
    	var zsCount = 0;
    	for(var j=0;j<collectNameArrary.length;j++){//再次读取原始json数组,与上述生成的设备类型数组循环比较，统计数据
    		var ab= 0;
    	    $.each(jsonData,function(i,item){
    			if(item.NavName == collectNameArrary[j]){
            		ab++;
            	}
    		});

    	    zsCount += ab;
    	    var obj = {"name":collectNameArrary[j],"value":ab};
    	    $("#textDiv").append('<div class="col-xs-6 "><div class="thumbnail"><div class="caption"><h4>'+ ab +'台</h4><p>'+collectNameArrary[j]+'</p></div></div></div>');
    		collectDataArrary.push(obj);
    	}
    	
		setTimeout(function () {//间隔50m渲染数据
			  setData(collectNameArrary,collectDataArrary,zsCount);
	    }, 50);     	
    }
    
    /******************** echart *****************************/
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    
    function setData(collectNameArrary,collectDataArrary,zsCount) {
            myChart.setOption({
            	title: {
            		subtext: zsCount+"台"
                },
            	legend: {
                    data: collectNameArrary//['变压器','低压进线柜','低压馈线柜']
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '设备统计',
                    data: collectDataArrary//["1","3","3","3","1"]
                }]
            });
    }
    

    // 初始 option
    option = {
        title: {
        	text: '设备统计',
            textStyle: {
            	fontSize: '20'
            },
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            textStyle: {
            	fontSize: '18'
            },
            top:'40',
            data:[]
        },
        series: [{
            name: '设备统计',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'outside',//formatter: "{b}: {c} ({d}%)"
                    textStyle: {
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 60
                }
            },
            data: []
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    } ;
    
    myChart.on('click', function (params) {
		//console.log(params.name);
		url= path + "/v1/analysis/device/statistics2/"+ProjectCode+"/"+params.name;
		window.open(url)
	});
    
    /******************** echart end*****************************/
    

    </script>
</body>
</html>